import React, { Component } from 'react';
import '../index.css'
import Lbb from './老版本'
import Xbb from './新版本'
class smzq extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      oldType:true,
      newType:true,
      fatherCount:0
    }
  }
  render() { 
    let oldCount
    if(this.state.oldType){
      oldCount = (<Lbb fatherCount={this.state.fatherCount}></Lbb>)
    }else{
      oldCount = (<div></div>)
    }
    return ( 
      <div>
        <div>首页内容：{this.state.fatherCount}</div>
        <button onClick={this.addCount}>求和</button>
        <ul className="myUl clearfix">
          <li>
            <p>老版本：<button onClick={this.oldShow}>{this.state.oldType?'隐藏':'显示'}</button></p>
            {oldCount}
          </li>
          <li>
            <p>新版本：<button onClick={this.newShow}>{this.state.newType?'隐藏':'显示'}</button></p>
            {this.newCount()}
          </li>
        </ul>
      </div>
    );
  }

  newCount = () => {
    if(this.state.newType){
      return (<Xbb></Xbb>)
    }else{
      return (<div></div>)
    }
  }

  oldShow = () => {
    this.setState({
      oldType:!this.state.oldType
    })
  }

  newShow = () => {
    this.setState({
      newType:!this.state.newType
    })
  }

  addCount = () => {
    this.setState({
      fatherCount:this.state.fatherCount+1
    })
  }

}
 
export default smzq;